<template>
  <ElSelect filterable clearable :="$attrs" placeholder="">
    <ElOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </ElSelect>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { ElSelect, ElOption } from 'element-plus'
import { getCusSerListList } from '../api'

interface Props {
  data: any;
}
const props = withDefaults(defineProps<Props>(), {
  data: () =>({}),
})

const options = ref<Array<{ label: string, value: string }>>([])

const getOptions = () => {
  if (props.data.companyNo) {
    getCusSerListList(props.data.companyNo, props.data.shopId)
      .then(res => {
        options.value = res
        console.log(options.value);
      })
  } else {
    options.value = []
  }
  
}

watch(() => props.data.companyNo, () => {
  console.log('aa');
  getOptions()
})

onMounted(() => {
  getOptions()
})
</script>